<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" :collapse="true" @filterChange="changeHandle_car" @onCollapse="collapseHandle_car"></TopFilter>
    <FilterTable
      ref="table_car"
      height="auto"
      selectionType="single"
      :columns="columns_car"
      :fetchapi="fetchApi_car"
      :params="fetchParams_car"
      :isSelectColumn="isSelectColumn"
      :datakey="'rows'"
      columnsRef="customerRepair_customerinfo_ownerVehicleManagement_vehicle_main"
      :onColumnsChange="columns_car => (this.columns_car = columns_car)"
      :onRowSelectChange="onRowSelectChange_car"
    >
      <template slot="controls">
        <!-- <el-button size="small" type="primary" @click="openComplaintHistory">投诉历史</el-button> -->
        <AjaxButton size="small" type="primary" icon="el-icon-download" :click="vehicleExportData">车辆档案导出</AjaxButton>
      </template>
    </FilterTable>
    <Drawer :visible.sync="actions.visible" :title="actions.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addVehiclePanel :type.sync="actions.type" :resData="this.resData" @close="closeHandler_car" />
    </Drawer>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="cancelHandle">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import addVehiclePanel from './addVehiclePanel';
import { exportExcelFile } from '@/utils/index';
import { confirmAction, notifyAction, isFormEmpty } from '@/utils';
import { getAllUser } from '@/api/customerRepair/afterSaleVisit/resultEntry';
import {
  getOwnerExcelList,
  getServiceAdvisor,
  getVehicleExcelList,
  getProvince,
  getCitys,
  getDistrict,
  queryAllDealerInfo,
  getVehicleInfo
} from '@/api/customerRepair/customerInfo/ownerVehicleManagement';
import { queryChooseVin } from '../../../../api/repair/precontract/precontractStatus';
import { menuUserAction } from '@/api/repair/repairReception/repairBusinessManger';
import { getCustomerGrade } from '@/api/customerRepair/customerInfo/customerGrade';
export default {
  name: 'lxjVehicleManage',
  components: {
    addVehiclePanel
  },
  mixins: [dictionary],
  props: {
    parentData: {
      type: Object,
      default: {}
    },
    isSelectColumn: {
      type: Boolean,
      default: true
    }
  },
  data() {
    this.BaseTable_car = null;
    this.resData = {};
    this.selectedRow = null;
    return {
      isHidden: 'none',
      topFilterList: this.createTopFilterList_car(),
      columns_car: this.createTableColumns_car(),
      fetchApi_car: getVehicleInfo,
      fetchParams_car: { xhrAbort: true, ownerNo: this.parentData.ownerNo },
      actions: { visible: false, title: '', type: '' },
      CarList: {},
      editAuth: true,
      isExportExcel2: false
    };
  },
  created() {
    // this.getAllUser();
    // this.getInvoiceTypeList();
    // this.getCustomerGradeList();
  },
  mounted() {
    this.BaseTable_car = this.$refs.table_car.$refs.pageTable;
    this.init();
    // this.queryAllDealerInfo();
  },
  methods: {
    createTopFilterList_car() {
      return [
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'license'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        }
      ];
    },
    createTableColumns_car() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          // disabled={this.editAuth} 编辑权限代码 在 <el-button size="mini" type="text"  之后添加
          render: props => {
            return (
              <div style="text-align:center">
                <el-button size="mini" type="text" onClick={() => this.openHandler('editVehicle', props.row)}>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
                <el-button size="mini" type="text" onClick={() => this.openHandler('detailVehicle', props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: 'VIN码',
          dataIndex: 'vin',
          width: 150,
          sorter: true,
          filter: true,
          showOverflowTooltip: true,
          filterType: 'input'
        },
        {
          title: '发动机号',
          dataIndex: 'engineNo',
          showOverflowTooltip: true
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '配置',
          dataIndex: 'apAckAgeName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '内饰颜色',
          dataIndex: 'innerColorName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '外饰颜色',
          dataIndex: 'outColorName',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '车辆性质',
          dataIndex: 'businessKind',
          width: 150,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.businessKind, 4103)}</span>;
          }
        },
        {
          title: '车辆用途',
          dataIndex: 'vehiclePurpose',
          width: 150,
          showOverflowTooltip: true,
          render: props => {
            return <span>{this.createDictText(props.row.vehiclePurpose, 1511)}</span>;
          }
        },
        {
          title: '生产日期',
          dataIndex: 'productDate',
          width: 150,
          showOverflowTooltip: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          width: 150,
          showOverflowTooltip: true,
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '排量/功率',
          dataIndex: 'engineDesc',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '电机号1',
          dataIndex: 'motorNo1',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '电机号2',
          dataIndex: 'motorNo2',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '燃烧类别',
          dataIndex: 'fuelType',
          width: 150,
          showOverflowTooltip: true
        },
        {
          title: '排放标准',
          dataIndex: 'dischargeStandrd',
          width: 150,
          showOverflowTooltip: true
        },
        // {
        //   title: '产地',
        //   dataIndex: 'productingArea',
        //   width: 150,
        //   showOverflowTooltip: true
        // },
        {
          title: '厂牌型号',
          dataIndex: 'brandModel',
          width: 150,
          showOverflowTooltip: true
        }
      ];
    },
    changeHandle_car(val) {
      this.fetchParams_car = Object.assign({}, val, { ownerNo: this.parentData.OWNER_NO });
    },
    collapseHandle_car() {
      this.$nextTick(() => {
        this.BaseTable_car.EXECUTE_RESET_HEIGHT();
      });
    },
    onRowSelectChange_car(row) {
      if (!row.length) {
        this.selectedRow = null;
      } else {
        this.selectedRow = row[0];
      }
    },

    // 初始化查询
    async init() {
      this.BaseTable_car.START_LOADING();
      // await this.menuUserAction();
      if (!isFormEmpty(this.parentData.ownerNo)) {
        this.fetchParams_car = { ownerNo: this.parentData.ownerNo };
      } else {
        this.fetchParams_car = { xhrAbort: true };
      }
      this.BaseTable_car.STOP_LOADING();
    },
    // async menuUserAction() {
    //   let res = await menuUserAction();
    //   for (const item of res.data) {
    //     if (item.actionUrl == '888888') {
    //       this.isHidden = '';
    //     }
    //     if (item.actionUrl == '222222') {
    //       this.editAuth = false;
    //     }
    //   }
    // },
    // 所有用户
    // async getAllUser() {
    //   const res = await getAllUser();
    //   const userList = res.data.map(x => ({ value: x.userId + '', text: x.employeeName }));
    //   this.columns_car.forEach(x => {
    //     if (x.dataIndex === 'SERVICE_ADVISOR' || x.dataIndex === 'CONSULTANT') {
    //       x.editItems = userList;
    //       x.filterItems = userList;
    //     }
    //   });
    // },

    // 打开弹窗
    openHandler(type, val) {
      if (type === 'editVehicle') {
        this.resData = val;
        this.actions = { visible: true, title: '编辑车辆信息', type: 'edit' };
      } else if (type === 'detailVehicle') {
        this.resData = val;
        this.actions = { visible: true, title: '车辆信息明细', type: 'show' };
      }
    },
    closeHandler_car(val, type) {
      this.actions.visible = val;
      this.fetchParams_car = { ...this.fetchParams_car };
    },
    // 车辆导出
    async vehicleExportData() {
      await getVehicleExcelList(this.fetchParams_car).then(res => {
        if (res.status !== 'failure') {
          exportExcelFile(res.data, '车辆信息');
        } else {
          notifyAction('导出失败', 'error');
        }
      });
    },
    cancelHandle() {
      this.$emit('close', false);
    }
  }
};
</script>

<style lang="less" scoped></style>
